<template>
  <j-modal title="添加回访" :width="1000" :visible="visible" :confirmLoading="loading" switchFullscreen
    @cancel="handleCancel" @ok="handleOk">
    <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <p class="pt">基本信息（必填）</p>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="个案编号" prop="caseNo">
            <a-input v-model="form.caseNo" :disabled="isDisabled" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="人员姓名" prop="realName">
            <a-input v-model="form.realName" :disabled="isDisabled" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="负责社工" prop="belongManagerName">
            <a-input v-model="form.belongManagerName" :disabled="isDisabled" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="开案日期" prop="openDate">
            <a-date-picker v-model="form.openDate" :disabled="isDisabled" style="width:100%;" format="YYYY-MM-DD"
              placeholder="请选择" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="结案日期" prop="closureDate">
            <a-date-picker v-model="form.closureDate" :disabled="isDisabled" style="width:100%;" format="YYYY-MM-DD"
              placeholder="请选择" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <p class="pt pl">回访记录（必填）</p>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="回访次数" prop="rvCount">
            <a-input v-model="form.rvCount" :disabled="isDisabled" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="回访日期" prop="rvTime">
            <a-date-picker v-model="form.rvTime" style="width:100%;" format="YYYY-MM-DD" placeholder="请选择" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="回访社工" prop="rvPerson">
            <a-select v-model="form.rvPerson" placeholder="请选择" allowClear style="width:100%;">
              <a-select-option v-for="(item, key) in rvPersonArr" :key="key"
                :value="item.personnelName">{{ item.personnelName }}
              </a-select-option>
            </a-select>
            <!-- <a-input v-model="form.rvPerson" placeholder="请输入" /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8" class="item1">
          <a-form-model-item label="回访形式" prop="rvForm">
            <a-radio-group v-model="form.rvForm" @change="onStatusChange">
              <a-radio v-for="(item, key) in rvFormArr" :key="key" :value="item.value">{{ item.title }}
              </a-radio>
            </a-radio-group>
            <a-input v-if="isOther" v-model="form.rvFormOther" placeholder="请输入"
              style="position: absolute;top: -5px;width:200px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8" class="item1">
          <a-form-model-item label="回访内容" prop="rvContent">
            <a-textarea v-model="form.rvContent" placeholder="请输入" :auto-size="{ minRows: 3, maxRows: 5 }" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>
<script>
import * as returnVisitApi from '@/api/sjsk/help/returnVisit.js'
import { getDivisionAdmin } from "@api/sjsk/specialist";
import { getDictItemsFromCache } from '@/api/api'
export default {
  name: 'AddModal',
  components: {
  },
  data() {
    return {
      visible: false,
      form: {},
      statusValue: undefined,
      isOther: false,
      isDisabled: true,
      rvFormArr: getDictItemsFromCache('rvForm'),
      loading: false,
      rules: {
        caseNo: [{ required: true, message: '请输入' }],
        realName: [{ required: true, message: '请输入' }],
        belongManagerName: [{ required: true, message: '请输入' }],
        openDate: [{ required: true, message: '请选择' }],
        closureDate: [{ required: true, message: '请选择' }],
        rvCount: [{ required: true, message: '请输入' }],
        rvTime: [{ required: true, message: '请选择' }],
        rvPerson: [{ required: true, message: '请输入' }],
        rvForm: [{ required: true, message: '请选择' }],
        rvContent: [{ required: true, message: '请输入' }],
      },
      rvPersonArr: []
    }
  },
  async created() {
  },
  methods: {
    show(record, departmentId) {
      this.visible = true
      let params = {
        ceId: record.ceId,
        sopId: record.sopId,
        spId: record.spId
      }
      this.getDetail(params)
      this.getDivisionAdmin(departmentId)
    },
    getDetail(params) {
      returnVisitApi.personBasicInfo(params).then(res => {
        if (res.success) {
          this.form = res.result
        }
      })
    },
    getDivisionAdmin(departmentId) {
      console.log(departmentId)
      let pageFilter = {
        pageNo: 1,
        pageSize: 1000,
        division: departmentId
      }
      getDivisionAdmin(pageFilter).then(ser => {
        if (ser.success) {
          this.rvPersonArr = ser.result.records
        }
      })
    },
    onStatusChange(val) {
      console.log(val.target.value)
      if (val.target.value == 4) {
        this.isOther = true
      } else {
        this.isOther = false
      }
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // console.log(this.isOther)
          // console.log(this.form.rvFormOther)
          if (this.isOther && this.form.rvFormOther == undefined) {
            this.$message.warning("请输入回访形式！")
            return
          }
          this.loading = true
          returnVisitApi.addReturnVisit(this.form).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok');
              this.visible = false
              this.loading = false
            } else {
              this.loading = false
              this.$message.warn(res.message)
            }
          })
            .catch(e => {
              this.loading = false
              this.$message.warn('请求失败！')
            })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.pt {
  font-weight: bold;
}

.pl {
  padding-top: 20px;
  border-top: 1px dotted #ccc;
}

.ant-row {
  margin-left: 10px;
}

.item1 {
  width: 67%;

  /deep/.ant-col-6 {
    width: 12.3%;
  }

  /deep/.ant-col-18 {
    width: 87.3%;
  }
}
</style>
